<template>
  <div :style="defaultStyle" :class="isActiveClass">
    <div class="divider" :style="dividerStyle"></div>
  </div>
</template>

<script setup lang="ts">
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    },
    isActiveClass: {
      type: String,
      default: ''
    }
  })

  const defaultStyle = computed(() => {
    const s = props.contentData.style
    return {
      paddingTop: s.paddingTop,
      paddingLeft: s.paddingLeft,
      paddingRight: s.paddingRight,
      paddingBottom: s.paddingBottom
    }
  })

  const dividerStyle = computed(() => {
    const s = props.contentData.itemStyle || {}

    if (props.contentData.layout === 'dashed') {
      return {
        height: s.height + 'px',
        backgroundImage: `radial-gradient(circle, ${s.backgroundColor} 2px, transparent 2px)`,
        backgroundSize: '8px 100%',
        backgroundRepeat: 'repeat-x'
      }
    }

    return {
      height: s.height ? s.height + 'px' : '1px',
      backgroundColor: s.backgroundColor || '#dcdfe6'
    }
  })
</script>

<style scoped lang="scss">
  .divider {
    width: 100%;
  }

  .active-component {
    border: 1px solid var(--el-color-primary);
  }
</style>
